<template>
  <div class="m-logo">
    <h3>叩丁狼电商运营平台</h3>
    <!-- 图标控制侧边栏 -->
    <el-icon size="20" color="#fff" @click="isCollapse = !isCollapse">
      <Menu />
    </el-icon>
  </div>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      {{ userStore.username }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="index">首页</el-dropdown-item>
        <el-dropdown-item command="logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { ArrowDown } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Menu } from "@element-plus/icons-vue";
import { inject } from "vue";
import { useUserStore } from "@/store/user";
import { logout } from "@/common";
import { logoutAPI } from "../api";
// 从 home 拿到该值, 控制侧边栏显隐
let isCollapse = inject("isCollapse");

const userStore = useUserStore(); //pinia 用户信息
const router = useRouter(); //全局路由
// 点击菜单项触发的事件回调
const handleCommand = (command: string | number | object) => {
  // 点击首页
  if (command === "index") {
    router.push("/index"); //跳转回首页
  }
  // 点击退出
  if (command === "logout") {
    logout(
      // 告诉服务器退出登录
      () => {
        logoutAPI();
      },
      () => {
        ElMessage.warning("退出登录");
      }
    );
  }
};
</script>

<style scoped lang="less">
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-dropdown {
  color: #fff;
  cursor: pointer;
  display: flex;
}
.m-logo {
  display: flex;
  align-items: center;
  h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    margin-right: 20px;
  }
  .el-icon {
    cursor: pointer;
  }
}
</style>
